/**
 * @name Discover
 * @desc 发现
 */

import Taro from "@tarojs/taro"
import { View, Image, Input } from "@tarojs/components"
import { numberFixed } from "@/utils"
import { FlowMedia } from "@/components"

import "./styles.less"

const icoSearch = require("@/assets/icons/search.png")

const mediaList = [
    {
        id: "i9i8e8w7re",
        path: "http://attach.bbs.miui.com/forum/201402/28/221019o9vgjjaaaawaliu9.jpg",
        width: 1920,
        height: 1080
    },
    {
        id: "9o0iwwww",
        path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-746653.jpg",
        width: 1600,
        height: 1200
    },
    {
        id: "olkekfewjofiw903",
        path: "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-748198.jpg",
        width: 1080,
        height: 1920
    },
    {
        id: "wejf90j320fjsdjf902345weklr",
        path: "http://5b0988e595225.cdn.sohucs.com/images/20180928/1b4856e60edd413baa35d83aee72cede.jpeg",
        width: 1024,
        height: 1820
    }
]

class Discover extends Taro.Component {
    state = {
        searchBarHeight: 0,
        mediaWidth: 0
    }

    componentDidMount() {
        this.getSearchHeight()
        this.getMediaWidth()
    }

    getSearchHeight() {
        const query = Taro.createSelectorQuery()
        query
            .select("#search-bar")
            .boundingClientRect()
            .exec(res => {
                if (res[0]) {
                    this.setState({ searchBarHeight: Math.ceil(res[0].height) })
                }
            })
    }

    getMediaWidth() {
        // 这里将是异步函数,更新的mediaWidth无法重新让FlowMedia组件设置宽度
        // 因此,当mediaWidth为0时,阻止FlowMedia渲染
        Taro.getSystemInfo().then(res => {
            const designSize = 750
            const spacing = 30
            const screenWidth = numberFixed((designSize / res.screenWidth) * res.screenWidth)
            const mediaWidth = 0.5 * screenWidth - spacing
            this.setState({ mediaWidth })
        })
    }

    onReachBottom() {
        Taro.showLoading({ title: "loading..." })
        const t = setTimeout(() => {
            Taro.hideLoading()
            clearTimeout(t)
        }, 2000)
    }

    render() {
        const { searchBarHeight, mediaWidth } = this.state

        return (
            <View className="discover-page">
                <View id="search-bar" className="discover-page__search">
                    <View className="discover-page__search-content">
                        <Image className="discover-page__search-ico" mode="aspectFit" src={icoSearch} />
                        <Input className="discover-page__search-input" placeholder="search" />
                    </View>
                </View>

                <View className="discover-page__flow-wrapper" style={{ marginTop: searchBarHeight + "px" }}>
                    <View className="discover-page__flow-left">
                        {mediaWidth && mediaList.map(v => <FlowMedia key={v.id} mediaWidth={mediaWidth} data={v} />)}
                    </View>

                    <View className="discover-page__flow-right">
                        <FlowMedia mediaWidth={mediaWidth} />
                    </View>
                </View>
            </View>
        )
    }
}

export default Discover
